<template>
  <div
    :class="[`${prefixCls}__placeholder`]"
    :style="getPlaceholderDomStyle"
    v-if="getIsShowPlaceholderDom"
  ></div>
  <div :style="getWrapStyle" :class="getClass">
    <LayoutHeader v-if="getShowInsetHeaderRef" />
    <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
  </div>
</template>
<script lang="ts" setup>
import { unref, computed, CSSProperties } from "vue";

import LayoutHeader from "./index.vue";
import MultipleTabs from "../tabs/index.vue";

import { useHeaderSetting } from "@/hooks/setting/useHeaderSetting";
import { useMenuSetting } from "@/hooks/setting/useMenuSetting";
import { useFullContent } from "@/hooks/web/useFullContent";
import { useMultipleTabSetting } from "@/hooks/setting/useMultipleTabSetting";
import { useAppInject } from "@/hooks/web/useAppInject";
import { useDesign } from "@/hooks/web/useDesign";
import { useLayoutHeight } from "../content/useContentViewHeight";
import { useMultipleTabStore } from "@/store/modules/multipleTab";

const HEADER_HEIGHT = 48;

const TABS_HEIGHT = 32;

defineOptions({ name: "LayoutMultipleHeader" });

const { setHeaderHeight } = useLayoutHeight();
const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign("layout-multiple-header");

const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
const { getIsMobile } = useAppInject();
const {
  getFixed,
  getShowInsetHeaderRef,
  getShowFullHeaderRef,
  getHeaderTheme,
  getShowHeader,
} = useHeaderSetting();

const { getFullContent } = useFullContent();

const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();

const getShowTabs = computed(() => {
  return unref(getShowMultipleTab) && !unref(getFullContent);
});

const getIsShowPlaceholderDom = computed(() => {
  return unref(getFixed) || unref(getShowFullHeaderRef);
});

const getWrapStyle = computed((): CSSProperties => {
  const style: CSSProperties = {};
  if (unref(getFixed)) {
    style.width = unref(getIsMobile) ? "100%" : unref(getCalcContentWidth);
  }
  if (unref(getShowFullHeaderRef)) {
    style.top = `${HEADER_HEIGHT}px`;
  }
  return style;
});

const getIsFixed = computed(() => {
  return unref(getFixed) || unref(getShowFullHeaderRef);
});

const getIsUnFold = computed(
  () => !unref(getShowMenu) && !unref(getShowHeader),
);

const getPlaceholderDomStyle = computed((): CSSProperties => {
  let height = 0;
  if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
    if (
      (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
      unref(getShowHeader) &&
      !unref(getFullContent)
    ) {
      height += HEADER_HEIGHT;
    }
    if (unref(getShowMultipleTab) && !unref(getFullContent)) {
      height += TABS_HEIGHT;
    }
    setHeaderHeight(height);
  }
  return {
    height: `${height}px`,
  };
});

const getClass = computed(() => {
  return [
    prefixCls,
    `${prefixCls}--${unref(getHeaderTheme)}`,
    { [`${prefixCls}--fixed`]: unref(getIsFixed) },
  ];
});
</script>
<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-layout-multiple-header";

.@{prefix-cls} {
  flex: 0 0 auto;
  transition: width 0.2s;

  &--dark {
    margin-left: -1px;
  }

  &--fixed {
    position: fixed;
    z-index: @multiple-tab-fixed-z-index;
    top: 0;
    width: 100%;
  }

  &__placeholder {
    transition: height 0.6s ease-in-out;
  }
}
</style>
